<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>menu</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }

        body {
            margin: 0 !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm data-refresh-btn layuimini-btn-primary"><i
                        class="layui-icon layui-icon-refresh"></i>刷新
                </button>
                <button class="layui-btn layui-btn-sm data-add-btn"><i class="layui-icon layui-icon-add-1"></i>添加
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"><i
                        class="layui-icon layui-icon-delete"></i>删除
                </button>
            </div>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="btn-expand"><i class="fa fa-folder-open-o"></i>&nbsp;全部展开
                </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" id="btn-fold"><i class="fa fa-folder-o"></i>&nbsp;全部折叠
                </button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>

<div hidden="hidden" id="menuform" style="margin: 10px 10px 10px 10px">
    <form class="layui-form " action="" lay-filter="menufrom">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" required placeholder="请输入菜单名" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-inline">
                <input type="text" name="href" placeholder="请输入菜单链接" autocomplete="off" class="layui-input"/>
            </div>
            <div class="layui-form-mid layui-word-aux">格式:"/html/..."(省略最后的.html)</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-inline">
                <select name="pid" lay-verify="required" id="pid">
                    <option value="0">最上层</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">默认图标</label>
            <div class="layui-input-inline">
                <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="hide"/>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效" checked="checked"/>
                <input type="radio" name="status" value="0" title="无效"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">target属性</label>
            <div class="layui-input-block">
                <input type="radio" name="target" value="_self" title="_self" checked="checked"/>
                <input type="radio" name="target" value="_blank" title="_blank"/>
                <input type="radio" name="target" value="_parent" title="_parent"/>
                <input type="radio" name="target" value="_top" title="_top"/>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required|number" autocomplete="off" class="layui-input"/>
                <input type="hidden" name="id" id="id"/>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="formDemoClose">退出</button>
            </div>
        </div>
    </form>

</div>

<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
    </div>
</script>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'treeTable', 'iconPickerFa', 'form', 'layer'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treeTable = layui.treeTable;
        var iconPickerFa = layui.iconPickerFa;
        var form = layui.form;
        var layer = layui.layer;

        var insTb;

        // 监听刷新操作
        $(".data-refresh-btn").on("click", function () {
            treetableload();
        });

        $(function () {
            selectLoad();
            insTb = treetableload();
        })

        function selectLoad() {
            $.ajax({
                url: '/sys/allSysMenu',
                success: function (obj) {
                    if (obj.data.length > 0) {
                        var str = $("#pid").html();
                        $.each(obj.data, function (key, val) {
                            str += '<option value="' + val.id + '">' + val.title + '</option>';
                        })
                        $("#pid").html(str);
                        form.render('select');
                    }
                }
            });
        }

        //树形表格重载
        function treetableload() {
            return treeTable.render({
                elem: '#munu-table',
                url: '/sys/allSysMenu',
                page: false,
                size: 'sm',
                skin: 'line',
                height: '720',
                even: true,
                tree: {
                    iconIndex: 1,
                    isPidData: true,
                    idName: 'id',
                    pidName: 'pid'
                },
                cols: [ [
                    {type: 'numbers'},
                    {field: 'title', minWidth: 240, title: '节点名称'},
                    {field: 'id', width: 80, title: '节点标识'},
                    {
                        title: '节点图标', align: 'center', templet: function (d) {
                            return "<i class='" + d.icon + "'></i>";
                        }
                    },
                    {field: 'href', width: 240, title: '节点url'},
                    {
                        field: 'createAt',
                        title: '创建时间',
                        templet: '<div>{{ layui.util.toDateString(d.createAt, "yyyy-MM-dd HH:mm:ss") }}</div>'
                    },
                    {field: 'sort', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'isMenu', width: 160, align: 'center', templet: function (d) {
                            if (d.pid == 0) {
                                return '<span class="layui-badge layui-bg-red">目录</span>';
                            }
                            if (d.href == '') {
                                return '<span class="layui-badge layui-bg-blue">父节点</span>';
                            } else {
                                return '<span class="layui-badge-rim layui-bg-orange">功能菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
                ]],
                done: function (data, curr, count) {

                }
            });
        }

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.closeAll('page');
            $.ajax({
                url: "/sys/saveSysMenu",
                method: "post",
                data: data.field,
                success: function (data) {
                    if (data.code == '0') {
                        layer.msg('保存成功...', {time: 3000, icon: 6});
                        treetableload();
                        selectLoad();
                    } else {
                        console.info(data.msg);
                        layer.alert(data.msg, {
                            title: "系统异常",
                            icon: 2
                        });
                    }
                },
                error: function (xhr, msg) {
                    layer.alert(xhr.code + " " + msg);
                }
            });
            return false;
        });

        //监听关闭
        $("#formDemoClose").on("click", function () {
            layer.closeAll('page');
            form.val('menufrom', {title: '', href: '', status: '', sort: ''});
        });

        // 监听添加操作
        $(".data-add-btn").on("click", function () {
            form.val('menufrom', {title: '', href: '', status: '', sort: ''});
            //layer.msg('添加数据');
            $("#id").val("-1");
            layer.open({
                type: 1,
                title: "添加菜单",
                content: $("#menuform"),
                skin: 'layui-layer-molv'
            });
        });

        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "/lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            //每个图标格子的宽度
            cellWidth: '16%',
            // 点击回调
            click: function (data) {
                //console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                //console.log(d);
            }
        });

        //全部折叠
        $('#btn-expand').click(function () {
            insTb.expandAll();
        });

        //全部展开
        $('#btn-fold').click(function () {
            insTb.foldAll();
        });

        //监听工具条
        treeTable.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('确定删除 ' + data.title + ' 么？', {
                    title: "提示",
                    icon: 3,
                    skin: 'layer-ext-moon'
                }, function (index) {
                    $.ajax({
                        url: "/sys/deleteSysMenu",
                        method: "post",
                        data: {id: data.id},
                        success: function (data) {
                            if (data.code == '0') {
                                layer.closeAll('page');
                                treetableload();
                                layer.msg('删除成功...', {time: 3000, icon: 6});
                            } else {
                                console.info(data.msg);
                                layer.alert(data.msg);
                            }
                        },
                        error: function (xhr, msg) {
                            layer.alert(xhr.code + " " + msg);
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                form.val('menufrom', data);
                layer.open({
                    type: 1,
                    title: "编辑菜单",
                    content: $("#menuform"),
                    skin: 'layui-layer-lan'
                });
            }
        });
    });
</script>
</body>
</html>
